<template>
  <!-- 表单 -->
  <el-form inline="true">
    <el-form-item label="用户组昵称">
      <el-input
        v-model="params.nickName"
        placeholder="请您输入要搜索的用户组昵称"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        @click="onSearch"
        plain
      >搜索</el-button>
      <el-button
        @click="onReset"
        plain
        type="info"
      >重置</el-button>
      <el-button
        plain
        type="primary"
        :icon="Plus"
        @click="onAdd"
      >添加用户组</el-button>
    </el-form-item>
  </el-form>
  <!-- 表格 -->
  <el-table
    height="526px"
    :data="userGroupList"
  >
    <el-table-column
      prop="userGroupId"
      label="用户组id"
      width="180px"
    />
    <el-table-column
      prop="nickName"
      label="用户昵称"
    />
    <el-table-column
      prop="introduce"
      label="用户组介绍"
    />
    <el-table-column
      width="180px"
      label="操作"
    >
      <template #default="{ row }">
        <el-button
          type="text"
          @click="onEdit(row.userGroupId)"
        >编辑
        </el-button>
        <el-button
          type="text"
          class="red"
          @click="onDelete(row.userGroupId)"
        >删除
        </el-button>

      </template>
    </el-table-column>

  </el-table>
  <!-- 分页区域 -->
  <el-pagination
    background
    size="small"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    v-model:current-page="params.pageNum"
    v-model:page-size="params.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />


</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { deleteUserGroupService, getUserGroupDetailService, getUserGroupListService } from '@/apis/cuserGroup';
  import { OPERATION_TYPE, PAGE_VALUE } from '@/constants/CRUDConstants'
  import { USER_STATUE } from '@/constants/userConstants'
  import router from '@/router/index'
  import { ElMessage, ElMessageBox } from 'element-plus';


  const params = reactive({
    pageNum: PAGE_VALUE.PAGE_NUM,
    pageSize: PAGE_VALUE.PAGE_SIZE,
    nickName: '',
  })

  const userGroupList = ref([])
  const total = ref(0)

  async function getUserGroupList() {
    const ref = await getUserGroupListService(params)
    userGroupList.value = ref.rows
    total.value = ref.total
  }
  getUserGroupList()

  function onSearch() {
    params.pageNum = 1
    getUserGroupList()
  }

  function onReset() {
    params.pageNum = PAGE_VALUE.PAGE_NUM
    params.pageSize = PAGE_VALUE.PAGE_SIZE
    params.userId = ''
    params.nickName = ''
    getUserGroupList()
  }

  let oldSize = PAGE_VALUE.PAGE_SIZE
  function handleSizeChange(newSize) {
    const curFirstNum = (params.pageNum - 1) * oldSize + 1 // 当前页面的第一个值在总数中的位置
    params.pageNum = Math.ceil(curFirstNum / newSize)
    oldSize = newSize
    console.log('true');

    getUserGroupList()
  }

  function handleCurrentChange(newPage) {
    getUserGroupList()
  }

  function onEdit(userGroupId) {
    router.push(`/oj/layout/cuserGroupUpdate?userGroupId=${userGroupId}&type=${OPERATION_TYPE.EDIT}`)
  }

  function onAdd() {
    router.push(`/oj/layout/cuserGroupUpdate?type=${OPERATION_TYPE.ADD}`)
  }

  async function onDelete(userGroupId) {
    await ElMessageBox.confirm('此操作将永久删除该用户组, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    await deleteUserGroupService(userGroupId)
    ElMessage.success('删除成功')
    getUserGroupList()
  }

</script>